<template>
	<view class="admin-container">
		<!-- 顶部导航栏 -->
		<view class="admin-header">
			<view class="header-logo">
				<image src="/static/logo.png" mode="heightFix"></image>
				<text class="logo-text">后台管理系统</text>
			</view>
			<view class="header-user">
				<text class="welcome-text">欢迎，{{ userInfo.nickname || userInfo.username }}</text>
				<view class="logout-btn" @click="handleLogout">退出登录</view>
			</view>
		</view>

		<!-- 主体内容区域 -->
		<view class="admin-content">
			<view class="sidebar">
				<view class="menu-item" :class="{ active: currentMenu === item.id }" v-for="(item, index) in menuList"
					:key="index" @click="switchMenu(item.id)">
					<text>{{ item.name }}</text>
				</view>
			</view>

			<view class="main-content">
				<!-- 控制台内容 -->
				<view v-if="currentMenu === 'dashboard'" class="dashboard-content">
					<view class="welcome-card">
						<view class="welcome-title">
							<text>欢迎使用后台管理系统</text>
						</view>
						<view class="welcome-info">
							<text>当前时间：{{ currentTime }}</text>
						</view>
						<view class="user-info" v-if="userInfo">
							<view class="info-item">
								<text class="info-label">用户名：</text>
								<text class="info-value">{{ userInfo.username }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">昵称：</text>
								<text class="info-value">{{ userInfo.nickname || '-' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">角色：</text>
								<text class="info-value">{{ userInfo.role === 'admin' ? '超级管理员' : '普通操作员' }}</text>
							</view>
							<view class="info-item">
								<text class="info-label">最后登录：</text>
								<text class="info-value">{{ formatDate(userInfo.last_login_date) }}</text>
							</view>
						</view>
					</view>

					<view class="dashboard-cards">
						<view class="dashboard-card">
							<view class="card-number">{{ dashboardData.userCount }}</view>
							<view class="card-title">总用户数</view>
						</view>
						<view class="dashboard-card">
							<view class="card-number">{{ dashboardData.todayNewCount }}</view>
							<view class="card-title">今日新增</view>
						</view>
						<view class="dashboard-card">
							<view class="card-number">{{ dashboardData.contentCount }}</view>
							<view class="card-title">内容总数</view>
						</view>
						<view class="dashboard-card">
							<view class="card-number">{{ dashboardData.messageCount }}</view>
							<view class="card-title">系统消息</view>
						</view>
					</view>
				</view>
				
				<!-- 用户管理内容 -->
				<view v-else-if="currentMenu === 'users'" class="user-management-content">
					<user-list></user-list>
				</view>
				
				<!-- C端用户列表内容 -->
				<view v-else-if="currentMenu === 'c_users'" class="user-management-content">
					<c-user-list></c-user-list>
				</view>
				
				<!-- 其他菜单内容 -->
				<view v-else class="other-content">
					<view class="developing-notice">
						<text>该功能正在开发中，敬请期待...</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onBeforeMount, defineAsyncComponent } from 'vue';

// 异步加载用户列表组件
const UserList = defineAsyncComponent(() => import('../user/list-component.vue'));
// 异步加载C端用户列表组件
const CUserList = defineAsyncComponent(() => import('../user/c-user-list.vue'));

// 用户信息
const userInfo = ref({
	username: '游客'
});

// 当前时间
const currentTime = ref('');

// 菜单列表
const menuList = ref([
	{ id: 'dashboard', name: '控制台' },
	{ id: 'users', name: '用户管理' },
	{ id: 'c_users', name: '行者管理' },
	{ id: 'contents', name: '内容管理' },
	{ id: 'settings', name: '系统设置' }
]);

// 当前选中的菜单
const currentMenu = ref('dashboard');

// 仪表盘数据
const dashboardData = ref({
	userCount: 0,
	todayNewCount: 0,
	contentCount: 0,
	messageCount: 0
});

// 切换菜单
const switchMenu = (menuId) => {
	currentMenu.value = menuId;
	// 不再需要跳转逻辑，直接切换当前菜单即可
};

// 格式化日期
const formatDate = (timestamp) => {
	if (!timestamp) return '-';

	try {
		const date = new Date(timestamp);
		const year = date.getFullYear();
		const month = String(date.getMonth() + 1).padStart(2, '0');
		const day = String(date.getDate()).padStart(2, '0');
		const hour = String(date.getHours()).padStart(2, '0');
		const minute = String(date.getMinutes()).padStart(2, '0');

		return `${year}-${month}-${day} ${hour}:${minute}`;
	} catch (error) {
		return '-';
	}
};

// 更新时间的函数
const updateTime = () => {
	const now = new Date();
	const year = now.getFullYear();
	const month = String(now.getMonth() + 1).padStart(2, '0');
	const day = String(now.getDate()).padStart(2, '0');
	const hour = String(now.getHours()).padStart(2, '0');
	const minute = String(now.getMinutes()).padStart(2, '0');
	const second = String(now.getSeconds()).padStart(2, '0');

	currentTime.value = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
};

// 检查登录状态
const checkLogin = () => {
	const token = uni.getStorageSync('token');
	const isLoggedIn = uni.getStorageSync('isLoggedIn');

	if (!isLoggedIn || !token) {
		uni.redirectTo({
			url: '/pages/login/login'
		});
	} else {
		const storedUserInfo = uni.getStorageSync('userInfo');
		if (storedUserInfo) {
			userInfo.value = storedUserInfo;
		}

		// 初始化仪表盘数据
		initDashboardData();
	}
};

// 初始化仪表盘数据 (示例数据，实际项目中应该从API获取)
const initDashboardData = () => {
	// 这里是模拟数据，实际项目中应调用云函数获取实时数据
	dashboardData.value = {
		userCount: 125,
		todayNewCount: 32,
		contentCount: 588,
		messageCount: 15
	};
};

// 退出登录
const handleLogout = () => {
	uni.showModal({
		title: '提示',
		content: '确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				// 清除登录状态和token
				uni.removeStorageSync('token');
				uni.removeStorageSync('isLoggedIn');
				uni.removeStorageSync('userInfo');

				// 跳转到登录页
				uni.redirectTo({
					url: '/pages/login/login'
				});
			}
		}
	});
};

onBeforeMount(() => {
	// 页面加载前检查登录状态
	checkLogin();
});

onMounted(() => {
	// 更新时间
	updateTime();
	// 每秒更新一次时间
	setInterval(updateTime, 1000);
});
</script>

<style>
.admin-container {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
}

.admin-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60px;
	padding: 0 20px;
	background-color: #001529;
	color: #fff;
}

.header-logo {
	display: flex;
	align-items: center;
}

.header-logo image {
	height: 40px;
	width: auto;
	margin-right: 10px;
}

.logo-text {
	font-size: 18px;
	font-weight: bold;
}

.header-user {
	display: flex;
	align-items: center;
}

.welcome-text {
	margin-right: 15px;
}

.logout-btn {
	padding: 5px 10px;
	background-color: #1890ff;
	border-radius: 4px;
	cursor: pointer;
}

.logout-btn:active {
	background-color: #096dd9;
}

.admin-content {
	display: flex;
	flex: 1;
	overflow: hidden;
}

.sidebar {
	width: 200px;
	background-color: #001529;
	color: #fff;
	padding: 20px 0;
}

.menu-item {
	height: 50px;
	line-height: 50px;
	padding: 0 20px;
	cursor: pointer;
}

.menu-item:hover {
	background-color: #1890ff;
}

.menu-item.active {
	background-color: #1890ff;
}

.main-content {
	flex: 1;
	padding: 20px;
	background-color: #f0f2f5;
	overflow-y: auto;
}

.welcome-card {
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	margin-bottom: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.welcome-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
}

.user-info {
	margin-top: 20px;
	padding: 15px;
	background-color: #f8f8f8;
	border-radius: 6px;
}

.info-item {
	display: flex;
	margin-bottom: 8px;
}

.info-label {
	width: 100px;
	color: #606266;
}

.info-value {
	color: #333;
	font-weight: 500;
}

.dashboard-cards {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -10px;
}

.dashboard-card {
	flex: 1;
	min-width: 200px;
	margin: 10px;
	background-color: #fff;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	text-align: center;
}

.card-number {
	font-size: 30px;
	font-weight: bold;
	color: #1890ff;
	margin-bottom: 10px;
}

.card-title {
	font-size: 14px;
	color: #666;
}

/* 开发中提示 */
.developing-notice {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 200px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	margin-top: 20px;
	color: #909399;
	font-size: 16px;
}

/* 用户管理内容样式 */
.user-management-content {
	width: 100%;
	height: 100%;
}
</style>
